<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style2.css">
<!-- <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> -->
<script type="text/javascript" src="home.js">
</script>
</head>
<body onload="refreshNumberOfItems()">
<div id="wrap">
	<table>
		<tr>
			<td><a href="store"><img src="<c:url value='/images/logo.jpg'/>" height="100"
				width="100" class="hboxthumb" /></a></td>
			<td><h2 id="sitename">Welcome to Wai Mai Store!  </h2></td>
		</tr>
	</table>
	
	Total number of items in your cart: <span id="shoppingCart">${sessionScope.nbrOfItems}</span><br><br>
	<a href="showcart"><u>View shopping cart</u></a><br><br>
	
	<input type="button" value="Add Your Selection to Cart" onClick="JavaScript:addToCart()">
			
	<div id="itemDetail"></div>
	<form id="itemForm">
		<div id = "itemList">
		
		<table>
			<tr>
				<th></th>
				<th>Click to View Details</th>
				<th>Item Name</th>
				<th>Price(SGD)</th>
				<th>Quantity</th>
			</tr>
			<c:forEach var="item" items="${itemList}">
				<tr>
					<td><input type="checkbox" name="selectedList"
						value="${item.itemNumber}" /></td>
					<td><a onclick="viewDetail(${item.itemNumber})" href="#">
						<img src="<c:url value='${item.imagePath}'/>" height="100" width="100" 
						onmouseover="this.width='105'; this.height='105'" onmouseout="this.width='100'; this.height='100'" class="hboxthumb"/></a></td>
					<td><a onclick="viewDetail(${item.itemNumber})" href="#">${item.name}</a></td>
					<td>${item.price}</td>
					<td><input type="text" id="${item.itemNumber}" size="3" /></td>
				</tr>
			</c:forEach>
		</table>
		</div>
	</form>

</div>
</body>
</html>
